<template>
  <div class="box">
        <div class="user-fermation">
            <div class="avatar-card">
            <el-row>
                <el-col :span="25">
                <el-card :body-style="{ padding: '0px' }">
                    <img :src="require('@/assets/avatar/'+this.avatar)" class="image">
                </el-card>
                </el-col>
            </el-row>

            <div class="lizhi">
                <div style="font-size: 18px;">业精于勤；慌于嬉</div>
                <div style="font-size: 18px;">行成于思；毁于随</div>
                <hr>
                <div>明日复明日，</div>
                <div>明日何其多。</div>
                <div>我生待明日，</div>
                <div>万事成蹉跎。</div>
            </div>

        </div>
        </div>


        <el-card class="box-card-infer">
            <el-descriptions class="margin-top" title="简介" :column="1" :size="默认" border>
                <template slot="extra">
                    <el-button type="primary" @click="handleClick">操作</el-button>
                </template>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    账号
                </template>
                {{username}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    昵称
                </template>
                {{account_name}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user-solid"></i>
                    姓名
                </template>
                {{name}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-male"></i>
                    <i class="el-icon-female"></i>
                    性别
                </template>
                <el-tag size="small">{{ this.sex == "1" ? "男" : "女" }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-postcard"></i>
                    身份证号
                </template>
                {{id_number}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                {{phone}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-message"></i>
                    邮箱Email
                </template>
                {{email}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    个性签名
                </template>
                {{signature}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    注册时间
                </template>
                {{create_time}}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        
        <el-collapse-transition>
            <div class="select" v-show="show1">
                <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="1" @click="open1">
                <span slot="title">修改密码</span>
                </el-menu-item>
                <el-menu-item index="2" @click="open2">
                <span slot="title">修改头像</span>
                </el-menu-item>
                <el-menu-item index="3" @click="open3">
                <span slot="title">编辑资料</span>
                </el-menu-item>
                </el-menu>
            </div>
        </el-collapse-transition>
        <transition name="el-zoom-in-center">
        <el-card class="box-card-operate1" v-show="show2">
            <el-input placeholder="原密码" v-model="password" show-password></el-input>
            <el-input placeholder="新密码" v-model="new_password" show-password></el-input>
            <el-input placeholder="确认新密码" v-model="q_new_password" show-password></el-input>
            <div class="but"><el-button type='primary' @click="update_password">提交</el-button></div> 
            <div class="bot"><el-button @click="cancle_password">取消</el-button></div>  
        </el-card>
        </transition>
        <transition name="el-zoom-in-center">

        <el-card class="box-card-operate2" v-show="show3">

            <el-upload
            :action="imageuploadURL"
            list-type="picture-card"
            ref="pictureUpload"
            :on-success="handleImageSuccess"
            :before-upload="beforeImageUpload"
            :on-exceed="handleExceed"
            :limit="1">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                    <span class="el-upload-list__item-delete" @click="removePicture(file)">
                  <i class="el-icon-delete"></i>
                </span>
                </span>       
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>

            <div class="bot2"><el-button type="primary" @click="cancle_avatar">确认</el-button></div>

        </el-card>


        </transition>
        <transition name="el-zoom-in-center">
        <el-card class="box-card-operate" v-show="show4">
            <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="昵称">
                <el-input v-model="form.accountname"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
            <el-switch
              v-model="form.sex"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="男"
              inactive-text="女"
              :active-value= "1"
               :inactive-value= "0">
            </el-switch>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="form.id_number"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱Email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="个性签名">
                <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.signature">
                </el-input>
            </el-form-item>
            <el-form-item>
                <div class="bt2">
                    <el-button type="primary" @click="update_infer">修改</el-button>
                </div>        
                <div>
                    <el-button class="bt1" @click="cancle">取消</el-button>
                </div>   
            </el-form-item>
            </el-form>
        </el-card>
        </transition>
  </div>
</template>

<script>
import axios from 'axios';
import 'element-ui/lib/theme-chalk/base.css';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
    data () {
        return {
            imageuploadURL:this.url + "/upload/avatar",
            jsonobject:{},
            /* 判断是否有字段被修改 */
            count: 0,
            username: "",
            account_name: "",
            name: "",
            sex: "",
            id_number: "",
            phone: "",
            email: "",
            signature: "",
            create_time: "",
            avatar: "",

            password: "",
            new_password: "",
            q_new_password:"",
            


            form: {
                accountname:'',
                name:'',
                sex: '',
                id_number:'',
                phone:'',
                email: '',
                signature: '',
            },
            show1: false,
            show2:false,
            show3:false,
            show4:false,
        }
    },
    methods: {
         /* 上传前检查文件是否合法，上传成功红获取文件名 */
         beforeAvatarUpload(file){
            const isIMG =
            file.type === 'image/jpg' ||
            file.type === 'image/jpeg' ||
            file.type === 'image/png'
            if (!isIMG) {
            this.$message.error('上传头像图片只支持jpg、jpeg、png格式!')
            }
            
            return isIMG
        },


        // 超出限制提示
        handleExceed () {
        this.$message.warning(`当前限制选择 1个文件`)
        },

        handleImageSuccess(res){
            if(this.avatar != "1.png"){
                axios.get(this.url + "/upload/davatar",{
                    params:{
                        fileName:this.avatar
                    }     
                }).then(() => {
                    
                }).catch(() => {
                    this.$message.error("出现错误,请联系管理员")
                })
            }
            this.$refs.pictureUpload.handleRemove()
            this.avatar = res.data
            axios.put(this.url + "/user/update",{
                "id":localStorage.getItem("id"),
                "avatar":this.avatar
            }).then((res) => {
                if(res.data.code == 1){
                    this.$message.success("图片上传成功")
                }else{
                    this.$message.error(res.data.msg)
                }
            }).catch(() => {
                this.$message.error("提交失败")
            });
            this.cancle_avatar()
        },



         //上传成功执行清空
        removePicture (file) {
            this.$refs.pictureUpload.handleRemove(file)   
        },


        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },


            

        handleClick(){
            this.show1 = !this.show1
            if(this.show2 == true){              
                this.cancle_password()
            }
            if(this.show4 == true){
                this.cancle()
            }
            if(this.show3 == true){
                this.cancle_avatar()
            }
        },
        open1(){
            this.show2 = !this.show2
            this.show3 = false
            this.show4 = false
            this.password=""
            this.new_password=""
            this.q_new_password=""
        },
        cancle_password(){
            this.show2 = !this.show2
            this.password=""
            this.new_password=""
            this.q_new_password=""
        },
        cancle_avatar(){
            this.show3 = !this.show3
        },
        open2(){
            this.show3 = !this.show3
            this.show2 = false
            this.show4 = false
        },
        open3(){
            this.show4 = !this.show4
            this.show3 = false
            this.show2 = false
            if(this.show4 == false){
                this.form.accountname=this.account_name
                this.form.name=this.name
                this.form.sex=this.sex
                this.form.id_number=this.id_number
                this.form.phone=this.phone
                this.form.email=this.email
                this.form.signature=this.signature
            }
        },
        update_password(){
            if(this.password == "" || this.new_password == "" || this.q_new_password == ""){
                this.$message.warning("密码不能为空")
                return;
            }
            if(this.new_password != this.q_new_password){
                this.$message.warning("两次输入密码不一致")
                return;
            }
            axios.put(this.url + "/user/updatepwd",{
                id:localStorage.getItem("id"),
                username: localStorage.getItem("username"),
                password: this.password,
                newPassword: this.new_password
            }).then((res) => {
                if(res.data.code == 1){
                    this.$message.success("修改成功，即将跳转登录页面")
                    localStorage.clear()
                    this.$router.push("/")
                }else{
                    this.$message.error(res.data.msg)
                    this.handleClick()
                }
            }).catch(() => {
                this.$message.error("请求失败")
                this.handleClick()
            });
        },
        update_infer(){
            this.form.accountname = this.form.accountname.trim()
            this.form.name = this.form.name.trim()
            this.form.signature = this.form.signature.trim()
            var reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            var reg2 = /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/
            var reg3 = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;      
            if(!reg1.test(this.form.phone)){
                this.$message.error("电话号码输入不正确")
                return
            }
            if(!reg2.test(this.form.id_number)){
                this.$message.error("身份证号输入不正确")
                return
            }
            if(!reg3.test(this.form.email)){
                this.$message.error("邮箱输入不正确")
                return
            }
            this.$set(this.jsonobject,"id",localStorage.getItem("id"))
            if(this.form.accountname!=this.account_name){
                this.count += 1
                this.account_name=this.form.accountname
                this.$set(this.jsonobject,"accountName",this.form.accountname)
            }
            if(this.form.name!=this.name){
                this.count += 1
                this.name=this.form.name
                this.$set(this.jsonobject,"name",this.form.name)
            }
            this.$set(this.jsonobject,"sex",this.form.sex)
            if(this.form.id_number!=this.id_number){
                this.count += 1
                this.id_number=this.form.id_number
                this.$set(this.jsonobject,"idNumber",this.form.id_number)
            }
            if(this.form.phone!=this.phone){
                this.count += 1
                this.phone=this.form.phone
                this.$set(this.jsonobject,"phone",this.form.phone)
            }
            if(this.form.email!=this.email){
                this.count += 1
                this.email=this.form.email
                this.$set(this.jsonobject,"email",this.form.email)
            }
            if(this.form.signature!=this.signature){
                this.count += 1
                this.signature=this.form.signature
                this.$set(this.jsonobject,"signature",this.form.signature)
            }
            if(this.count == 0 && this.form.sex == this.sex){
                this.count = 0
                this.cancle()
                return;
            }
            axios.put(this.url + "/user/update",this.jsonobject).then((res) => {
                if(res.data.code == 1){
                    this.$message.success("修改成功")
                    this.getinfo()
                    this.count = 0
                    this.cancle()
                }else{
                    this.$message.error(res.data.msg)
                    this.count = 0
                    this.cancle()
                }
            }).catch(() => {
                this.$message.error("提交失败")
                this.count = 0
                this.cancle()
            });
        },
        cancle(){
            this.show4 = !this.show4
            if(this.show4 == false){
                this.form.accountname=this.account_name
                this.form.name=this.name
                this.form.sex=this.sex
                this.form.id_number=this.id_number
                this.form.phone=this.phone
                this.form.email=this.email
                this.form.signature=this.signature
            }
        },
        getinfo(){
            axios.get(this.url + "/user/info",{
            params:{
                    id: localStorage.getItem("id")
                }
        }).then((res) => {
            if(res.data.code == 1){    
                this.username=res.data.data.username
                this.account_name=res.data.data.accountName
                this.name=res.data.data.name
                if(res.data.data.sex == "男"){
                    this.sex=1
                }else{
                    this.sex=0
                }
                this.id_number=res.data.data.idNumber
                this.phone=res.data.data.phone
                this.email=res.data.data.email
                this.signature=res.data.data.signature
                this.create_time=res.data.data.createTime
                this.avatar=res.data.data.avatar
                this.form.accountname=res.data.data.accountName
                this.form.name=res.data.data.name
                if(res.data.data.sex == "男"){
                    this.form.sex=1
                }else{
                    this.form.sex=0
                }
                this.form.id_number=res.data.data.idNumber
                this.form.phone=res.data.data.phone
                this.form.email=res.data.data.email
                this.form.signature=res.data.data.signature
            }else{
                this.$message.error(res.data.msg)
            }
        }).catch(() => {
            this.$message.error("加载失败")
        });
        }
    },
    mounted () {
        axios.get(this.url + "/user/info",{
            params:{
                    id: localStorage.getItem("id")
                }
        }).then((res) => {
            if(res.data.code == 1){    
                this.username=res.data.data.username
                this.account_name=res.data.data.accountName
                this.name=res.data.data.name
                if(res.data.data.sex == "男"){
                    this.sex=1
                }else{
                    this.sex=0
                }
                this.id_number=res.data.data.idNumber
                this.phone=res.data.data.phone
                this.email=res.data.data.email
                this.signature=res.data.data.signature
                this.create_time=res.data.data.createTime
                this.avatar=res.data.data.avatar
                this.form.accountname=res.data.data.accountName
                this.form.name=res.data.data.name
                if(res.data.data.sex == "男"){
                    this.form.sex=1
                }else{
                    this.form.sex=0
                }
                this.form.id_number=res.data.data.idNumber
                this.form.phone=res.data.data.phone
                this.form.email=res.data.data.email
                this.form.signature=res.data.data.signature
            }else{
                this.$message.error(res.data.msg)
            }
        }).catch(() => {
            this.$message.error("加载失败")
        });
    }
}
</script>

<style scoped>
    .but{
        position: absolute;
        left: 18%;
        bottom: 4%;     
    }

    .bot{
        position: absolute;
        right: 18%;
        bottom: 4%;
    }
    .bot2{
        position: absolute;
        right: 40%;
        bottom: 0%;
    }

    .bt2{
        position: absolute;
        right: 80%;
        top: 150%; 
    }
    .bt1{
        position: absolute;
        left: 50%;
        top: 150%; 
    }

    .box-card-operate1{
        line-height: 70px;
        padding-left: 15px;
        padding-right: 15px;
        width: 373px;
        height: 300px;
        position: absolute;
        background-color: rgb(255, 255, 255,0.9);
        left: 35%;
        top: 20%;
        border-radius: 6px;
    }
    .box-card-operate2{
        line-height: 70px;
        width: 360px;
        height: 270px;
        position: absolute;
        background-color: rgb(255, 255, 255,0.9);
        left: 40%;
        top: 20%;
        border-radius: 6px;
        text-align: center;
    }

    .box-card-operate{
        line-height: 70px;
        padding-left: 15px;
        padding-right: 15px;
        width: 500px;
        height: 600px;
        position: absolute;
        background-color: rgb(255, 255, 255,0.9);
        left: 35%;
        top: 5%;
        border-radius: 6px;
    }

    
    

    .select{
        width: 110px;
        height: 160px;
        position: absolute;
        background-color: rgb(255, 255, 255,0.4);
        right: 5%;
        top: 0%;
        border-radius: 6px;
    }



    .box-card-infer{
        width: 700px;
        height: 550px;
        position: absolute;
        background-color: rgb(255, 255, 255);
        right: 13%;
        top: 8%;
        border-radius: 10px;
    }


    .font{
        position: relative;
        right: 10%;
        top: 15%;
        color: aliceblue;
    }

    .box{
        width: 100%;
        height: 100%;
        position: relative;
        background-image: url("../assets/image/person.png");
        background-size: cover;

    } 
    

    .avatar-card{
        position: absolute;
        left:36%;
        top:2%;

    }
    

    .user-fermation{
        /* 两边间隙 */
        /* padding: 12px; */
        width: 373px;
        height: 400px;
        position: fixed;
        background-color: rgb(255, 255, 255,0.4);
        left: 10%;
        top: 25%;
        border-radius: 15px;
        
    }

    .image{
        width: 80px;
        height: 80px;
        display: block;
    }

    .lizhi{
        position: fixed;
        background-color: rgb(255, 255, 255,0.4);
        width: 320px;
        height: 300px;
        left: 11.8%;
        top:40%;
        border-radius: 15px;
        /* z-index: 5; */
        text-align: center;
        line-height: 40px;
    }
</style>